<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
</head>
<script src="../../js/vue.js"></script>
<style scoped>
    .shopping-cart {
        max-width: 800px;
        margin: 0 auto;
        text-align: center;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    th,
    td {
        border: 1px solid #ccc;
        padding: 10px;
        text-align: left;
    }

    th {
        background-color: #f2f2f2;
    }
</style>

<body>
<div id="app">
    <div class="shopping-cart">
        <h1>购物车</h1>
        <table>
            <thead>
            <tr>
                <th>商品名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>总价</th>
            </tr>
            </thead>

            <tr>
                <td>笔记本电脑</td>
                <td>8999</td>
                <td><input type="number" min="1"></td>
                <td>8999</td>
            </tr>
            <tr>
                <td>平板电脑</td>
                <td>2999</td>
                <td><input type="number" min="1"></td>
                <td>5998</td>
            </tr>
        </table>
    </div>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            cartItems: [{
                product: {
                    id: 1,
                    name: '笔记本电脑',
                    price: 8999
                },
                quantity: 1,
                totalPrice: 8999
            },
                {
                    product: {
                        id: 2,
                        name: '平板电脑',
                        price: 2999
                    },
                    quantity: 2,
                    totalPrice: 5998
                }
            ]
        },
        methods: {}


    });
</script>
</body>

</html>